@import "https://fonts.cdnfonts.com/css/Akrobat";
@import "https://fonts.googleapis.com/css2?family=Poppins";

@import url('https://fonts.googleapis.com/css2?family=Lavishly+Yours&family=Syncopate:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lavishly+Yours&family=Oswald:wght@200..700&family=Syncopate:wght@400;700&display=swap');

@font-face {
    font-family: 'DrukCyr-Medium';
    src: url(fonts/DrukCyr-Medium.ttf);
}

@font-face {
    font-family: "Monument Extended";
    src: url(fonts/MonumentExtended-Regular.otf);
}

@font-face {
    font-family: "Koulen";
    src: url(fonts/AMOQz46as3KIBPeWgnA9kuYMUg.ttf);
}

@font-face {
    font-family: "Gilroy-Bold";
    src: url(fonts/Gilroy-Bold.woff);
}

@font-face {
    font-family: "Gilroy-Regular";
    src: url(fonts/Gilroy-Regular.ttf);
}


@font-face {
    font-family: "Gilroy-SemiBold";
    src: url(fonts/Gilroy-SemiBold.ttf);
}

@font-face {
    font-family: "Gotham";
    src: url(fonts/Gotham-Medium.otf);
}

::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    
}

body {
    height: 100%;
    font-size: 1.5vh;
    overflow: hidden;
    color: rgb(255, 255, 255);

}

.shadow{
    position: absolute;
    width: 9.896vw;
    height: 1.302vw;
    top: 1vh;
    right: 1vh;

    background: rgba(253, 191, 34, 0);
    mix-blend-mode: normal;
    filter: blur(1.302vw);
    transform: matrix(-1, 0, 0, 1, 0, 0);

}

.topHud{
    position: absolute;
    top: 1vh;
    right: 1vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.01vw;
}


.topHud > .watermark{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0.15vh;
    
}

.topHud > .watermark img{
    width: 4vw;
    height: 4vw;
    margin-top: 2.5vh;
    margin-right: -1.5vh;


}


.topHud > .watermark > .texts{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 0.104vw;
    
}


.topHud > .watermark > .texts > .serverName{
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: 400;
    font-size: 0.893vw;
    line-height: 0.833vw;
    margin-right: -0.5vh;

    text-transform: uppercase;

    color: #FFFFFF;


}

.topHud > .watermark > .texts > .serverDiscord{
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 0.685vw;
    line-height: 0.625vw;
    margin-right: -0.5vh;

    color: #FFFFFF;

}

.topHud > .playerInfo{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 0.8vh;

    margin-bottom: 0.1vh;
    margin-right: 3vh;
    margin-top: -2.8vh;
}

.topHud > .playerInfo > .info{
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    flex-direction: row;
    gap: 0.28vw;


    min-width: 3vw;
    height: 1.4vw;
    background: rgba(0, 0, 0, 0.23);
    border-radius: 52.083vw;

    white-space: nowrap;
    overflow: visible;
    width: auto;

}

.topHud > .playerInfo > .info > .iconBox{

    width: 0.7vw;
    height: 0.7vw;

    background: #FFFFFF;
    box-shadow: 0vw 0.208vw 0.313vw rgba(255, 255, 255, 0.35);

    border-radius: 4.688vw;

    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;

}

.topHud > .playerInfo > .info > .iconBox i{
    color: #1A1A1A;
    font-size: 0.460vw;

}

.topHud > .playerInfo > .info > .data{
    font-family: 'Gilroy-SemiBold';
    font-style: normal;
    font-weight: 400;
    font-size: 0.521vw;


    color: #FFFFFF;




}

.topHud > .timeContainer{
    width: 6.198vw;
    height: 2.5vw;

    margin-top: 1.5vh;
    margin-left: 9vh;
    
    background: linear-gradient(90deg, #090A0E -177.23%, rgba(9, 10, 14, 0) 100%);
    border-radius: 0.156vw 0vw 0vw 0.156vw;
    transform: matrix(-1, 0, 0, 1, 0, 0);

    border-left: 0.2vw solid #1f1f1f;


    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 1vh;

}

.topHud > .timeContainer img{
    position: absolute;
    width: 6.198vw;
    height: 2.5vw;
    margin-left: -4vh;
    opacity: .5;

}



.topHud > .timeContainer > .shadow{
    width: 4.323vw;
    height: 1.25vw;

    background: rgba(253, 190, 34, 0.35);
    mix-blend-mode: normal;
    filter: blur(2.604vw);
    border-radius: 2.813vw;

}


.topHud > .timeContainer > .datas {

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vh;
    margin-left: 1vh;
    transform: scaleX(-1);

}

.topHud > .timeContainer > .datas i{

    color: #FFFFFF;
    font-size: 0.938vw;
}

.topHud > .timeContainer > .datas > .texts {

    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.topHud > .timeContainer > .datas > .texts > .time{

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 0.677vw;
    line-height: 0.833vw;
    text-align: right;
    letter-spacing: 0.05em;

    color: #FFFFFF;


}

.topHud > .timeContainer > .datas > .texts > .date {

    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 0.573vw;
    line-height: 0.677vw;

    color: rgba(255, 255, 255, 0.55);


}

.topHud > .paydayContainer{
    position: relative;
    width: 6.198vw;
    height: 20vw;

    margin-top: 0.7vh;
    margin-left: 9vh;
    
    background: linear-gradient(90deg, -177.23%, rgba(9, 10, 14, 0) 100%);
    border-radius: 0.156vw 0vw 0vw 0.156vw;
    transform: matrix(-1, 0, 0, 1, 0, 0);


    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 1vh;
}

.topHud > .paydayContainer img{
    position: absolute;
    width: 6.198vw;
    height: 2.5vw;
    margin-left: -4vh;


}

.topHud > .paydayContainer > .shadow{
    width: 4.323vw;
    height: 1.25vw;

    mix-blend-mode: overlay;
    filter: blur(2.604vw);
    border-radius: 2.813vw;

}


.topHud > .paydayContainer > .datas {

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vh;
    margin-left: 1vh;
    transform: scaleX(-1);

}

.topHud > .paydayContainer > .datas img{

    width: 2.2vw;
    height: 2.2vw;

}

.topHud > .paydayContainer > .datas > .texts {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    
}

.topHud > .paydayContainer > .datas > .texts > .text{

    font-family: 'Gotham';
    font-style: normal;
    font-weight: 700;
    font-size: 0.521vw;
    line-height: 0.573vw;

    color: #FFFFFF;




}

.topHud > .paydayContainer > .datas > .texts > .data {

    font-family: 'Gotham';
    font-style: normal;
    font-weight: 500;
    font-size: 0.573vw;
    letter-spacing: -0.025em;

    background: radial-gradient(98.81% 98.81% at 50% 50%, rgba(255, 255, 255, 0.678) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;


}

.bottomHud {

    position: absolute;
    
    bottom: 6vh;
    left: 97vw;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2vh;
}

.bottomHud > .moneyWrapper{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 1vh;
    margin-left: 1vh;

}

.bottomHud > .moneyWrapper > .text{

    font-family: 'Gotham';
    font-style: normal;
    font-weight: 500;
    font-size: 1.042vw;
    line-height: 0.99vw;
    letter-spacing: -0.04em;

    color: #FDBE22;

    text-shadow: 0vw 0vw 2.135vw rgba(253, 190, 34, 0.55);
    
    
}

.bottomHud > .statusWrapper{
   
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1vh;

    bottom: 30vh;
    left: 0vh;
}



.bottomHud > .statusWrapper > .elements{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.26vw;
    
}

.bottomHud > .statusWrapper > .elements > .wrap{
    width: 1.979vw;
    height: 1.979vw;
    left: 25vw;

    background: rgba(26, 26, 26, 0.5);

    border-radius: 4.088vw;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}


.bottomHud > .statusWrapper > .elements >.wrap i{
    position: absolute;
    font-size: 0.842vw;

}

.bottomHud > .statusWrapper > .elements > .precent{

    font-family: 'Gotham';
    font-style: normal;
    font-weight: 500;
    font-size: 0.627vw;
    line-height: 0.625vw;
    letter-spacing: -0.04em;
    left: -96vw;

    color: #ffffff;



}

/* NOTIFICARI */



@keyframes slideInRight {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

 .notificari{
    position: absolute;
    bottom: 19.5vh;
    right: 79.4vw;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1vh;
    transition: 1s;
}

.notificari > .notifyContainer{
    width: 16vw;
    height: 4.0vw;
    background: radial-gradient(119.52% 186.99% at 50% 50%, rgba(9, 10, 14, 0.5) 0%, rgba(9, 10, 14, 0) 100%);
    mix-blend-mode: normal;
    border-radius: 0.365vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
    justify-items: center;
    flex-direction: row;
    gap: 1vh;
    animation: slideInRight 1s ease-out;
    transition: 1s;
}

.notificari > .notifyContainer > .iconBox{
    position: absolute;
    width: 1.823vw;
    height: 1.823vw;
    border-radius: 0.26vw;
    transform: rotate(-45deg);
    margin-left: 1.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    align-content: center;
}

.notificari > .notifyContainer > .iconBox i{
    font-size: 1.146vw;
    transform: rotate(45deg);
}

.notificari > .notifyContainer > .texts {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.104vw;
    margin-left: 6.2vh;
}

.notificari > .notifyContainer > .texts > .title {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 700;
    font-size: 0.781vw;
    line-height: 0.885vw;
    text-transform: uppercase;
}

.notificari > .notifyContainer > .texts > .msg {
    font-family: 'Gotham';
    font-style: normal;
    font-weight: 400;
    font-size: 0.580vw;
    line-height: 0.600vw;
    background: radial-gradient(116.04% 116.04% at 50% 50%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.notifyContainer.success .iconBox {
    background: radial-gradient(39.81% 39.81% at 50% 50%, #09DD7A 0%, rgba(9, 124, 71, 0.88) 100%);
    border: 0.052vw solid #09DD7A;
}

.notifyContainer.success .title {
    color: #09DD7A;
}

.notifyContainer.error .iconBox {
    background: radial-gradient(39.81% 39.81% at 50% 50%, #BA3A3A 0%, rgba(114, 34, 34, 0.88) 100%);
    border: 0.052vw solid #BA3A3A;
}

.notifyContainer.error .title {
    color: #BA3A3A;
}

.notifyContainer.info .iconBox {
    background: radial-gradient(39.81% 39.81% at 50% 50%, #F06D2F 0%, rgba(133, 58, 23, 0.88) 100%);
    border: 0.052vw solid #F06D2F;
}

.notifyContainer.info .title {
    color: #F06D2F;
} 

@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

.notifyContainer.hide {
    animation: slideOutLeft 1s ease-out;
}